<template>
  <div class="mine">
    <header class="header"><van-icon name="envelop-o" /></header>
    <div class="first">
      <div class="img-box">
        <van-image
          width="100%"
          height="100%"
          lazy-load
          :src="require('@/../public/images/default-user.png')"
        />
      </div>
      <div class="right">
        <div class="btn">立即登录</div>
      </div>
    </div>
    <div class="balance">
      <div class="left">
        <div class="title">余额</div>
        <div class="sec">充值送红包</div>
        <div class="btn">充值</div>
      </div>
      <div class="right">
        <div class="title">签到</div>
        <div class="sec">做任务送红包</div>
        <div class="btn">签到</div>
      </div>
    </div>
    <div class="cell">
      <div class="left">
        <van-icon class="icon" name="orders-o" />
        <div class="text">笔记</div>
      </div>
      <div class="right"><van-icon class="icon" name="arrow" /></div>
    </div>
    <div class="cell">
      <div class="left">
        <van-icon class="icon" name="back-top" />
        <div class="text">已购和上传</div>
      </div>
      <div class="right"><van-icon class="icon" name="arrow" /></div>
    </div>
    <div class="cell">
      <div class="left">
        <van-icon class="icon" name="service-o" />
        <div class="text">在线客服</div>
      </div>
      <div class="right"><van-icon class="icon" name="arrow" /></div>
    </div>
    <div class="cell">
      <div class="left">
        <van-icon class="icon" name="qr" />
        <div class="text">夜间模式</div>
      </div>
      <div class="right"><van-icon class="icon" name="arrow" /></div>
    </div>
    <div class="cell">
      <div class="left">
        <van-icon class="icon" name="cash-back-record" />
        <div class="text">积分商城</div>
      </div>
      <div class="right"><van-icon class="icon" name="arrow" /></div>
    </div>
    <div class="cell">
      <div class="left">
        <van-icon class="icon" name="setting-o" />
        <div class="text">设置</div>
      </div>
      <div class="right"><van-icon class="icon" name="arrow" /></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.mine {
  width: 100%;
  .header {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.15rem;
    font-size: 0.25rem;
    color: var(--text-gray);
  }
  .first {
    width: 100%;
    height: 0.76rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    .img-box {
      width: 0.76rem;
      min-width: 0.76rem;
      height: 0.76rem;
      border-radius: 50%;
      overflow: hidden;
    }
    .right {
      font-size: 0.24rem;
      color: var(--text-black);
      flex-grow: 1;
      margin-left: 0.2rem;
      height: 100%;
      line-height: 0.76rem;
      font-weight: bold;
    }
  }
  .balance {
    width: 100%;
    box-sizing: border-box;
    padding: 0.15rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.01rem solid var(--border-gray);
    > div {
      flex: 1;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .title {
        font-size: 0.18rem;
        font-weight: bold;
      }
      .sec {
        margin-top: 0.05rem;
        font-size: 0.13rem;
        color: var(--text-gray);
      }
      .btn {
        height: 0.3rem;
        font-size: 0.13rem;
        margin-top: 0.1rem;
        color: var(--text-white);
        background-color: var(--text-red);
        border: 0.01rem solid var(--text-red);
        border-radius: 0.15rem;
        line-height: 0.3rem;
        padding: 0 0.2rem;
      }
    }
    .left {
      border-right: 0.01rem solid var(--border-gray);
    }
    .right {
      .btn {
        color: var(--text-red);
        background-color: var(--text-white);
      }
    }
  }
  .cell {
    width: 100%;
    height: .5rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-gray);
    .left{
      display: flex;
      align-items: center;
      .icon{
        font-size: .2rem;
      }
      .text{
        margin-left: .05rem;
      }
    }
    .right{
      .icon{
        font-size: .2rem;
        margin-top: .02rem;
      }
    }
  }
}
</style>